<template>
<div class="topic">
     <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <ul>
                <li v-for="item in list" :key="item.id">
                    <img :src="item.scene_pic_url" alt="">
                    <div class="title">{{item.title}}</div>
                    <div class="sub">{{item.subtitle}}</div>
                    <div class="red">0元起</div>
                </li>
            </ul>
         </van-list>
    
</div>
  
</template>

<script>
import {topic} from "@/api/topic/index.js"
export default {
    data(){
        return{
            list:[],
            loading:false,
            finished:false,
            start:1
        }
    },
    computed:{

    },
    methods:{
        onLoad(){
            // 不管发送的请求是get还是post 
             topic(
                 {
                    page: this.start
                 }
             )
            .then(res =>{
                console.log(res);
                // 
                this.list.push(...res.data);
                this.loading = false;
                this.start ++ ;
                if(this.start > res.total){ //4
                    this.finished = true;
                }
            })
        }
    },
    
}
</script>

<style  scoped lang="scss">
img{
    width: 100%;
}
.topic{
    padding-bottom: 50px;
}
.title{
    font-size: 20px;
    font-weight: 900;
    width: 100%;
    height: 80px;
    line-height: 80px;
}
.sub{
    width: 100%;
    height: 30px;
    color: gray;
}
.red{
    width: 100%;
    height: 50px;
    color: #CD7470;
    line-height: 50px;
}
li img{
    width: 100%;
    height: 210px;
}
</style>